<template>
    <div class="pager">     
        <a href="javascript:void(0);" v-show="showFirstPage" v-on:click="firstPage" >首页</a>
        <a href="javascript:void(0);" v-show="showPrevPage" v-on:click="prevPage" >上一页</a>
        <a href="javascript:void(0);" v-show="showNextPage" v-on:click="nextPage" >下一页</a>
        <a href="javascript:void(0);" v-show="showLastPage" v-on:click="lastPage" >尾页</a>
        <div>
            <select v-model="rowNum">
                <option value="10">10</option>
                <option selected="selected" value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>      
        <span>{{curPage}}/{{total}}</span>
        <div class="goto">
            <input type="text" v-model="gotoPage" />
            <a href="javascript:void(0);" v-on:click="gotoNextPage" >跳转</a>
        </div>
    </div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(() => { this.initPager() }) //需要延迟初始化
    },
    name: 'Pager',
    data () {
        return {
            "gotoPage":"",
            "showFirstPage":true,
            "showLastPage":true,
            "showPrevPage":true,
            "showNextPage":true,
            "rowNum":this.pageSize
        }
    },
    methods:{
        nextPage(){//下一页            
            this.$emit('setPage', this.curPage+ 1 ) //调用父组件方法
        },
        prevPage(){//上一页
            this.$emit('setPage', this.curPage- 1 ) //调用父组件方法
        },
        gotoNextPage(){//跳转页面
            if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){             
                var pg = parseInt(this.gotoPage)
                if(pg > 0 && pg <= this.pageSize){
                    this.$emit('setPage', pg ) //调用父组件方法
                }else{
                    this.gotoPage = ""
                }
            }else{
                this.gotoPage = ""
            }
        },      
        firstPage(){
            this.$emit('setPage', 1 ) //调用父组件方法
        },
        lastPage(){
            this.$emit('setPage', this.total ) //调用父组件方法
        },
        rowNumChanged(){
            this.$emit('setRowNum', this.rowNum )
        },
        initPager(){
            this.showFirstPage = this.curPage> 1
            this.showLastPage = this.curPage< this.total
            this.showPrevPage = this.curPage> 1
            this.showNextPage = this.curPage< this.total
            this.gotoPage = ""
        }
    },
    props:[
        "pageSize","curPage","total"
    ],
    watch:{
        'rowNum':'rowNumChanged' //监控rowNum
    }
}
</script>
<style>
.pager>span,.pager>a,.pager>select,.pager>div{
    float: left;
    margin-left: 10px;
}

.pager{
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
    height: 48px;
    line-height: 48px;
    margin-bottom: 40px;
}

.pager input,.pager select{
    height:40px; 
    line-height:40px;
    outline:none; 
    border:1px solid #888; 
    padding:10px; 
    box-sizing:border-box;
}
.pager input{
    width: 50px;
}
.pager .goto{
    margin-left: 20px;
}
.pager a{
    color: black;
    font-weight: bold;
    text-decoration: none;
}
.pager a:hover{
    color: green;
}

</style>